<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="my">我的</el-menu-item>
      <el-menu-item index="all" v-if="isCanCustomerByAll">全部</el-menu-item>
    </el-menu>
    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="发货单号：">
          <el-input v-model="listQuery.deliverSn"></el-input>
        </el-form-item>
        <el-form-item label="发货日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.deliverDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="客户名称：">
          <el-autocomplete
            clearable
            class="inline-input"
            value-key="customerName"
            :fetch-suggestions="querySearch"
            v-model="listQuery.customerName"
            placeholder="请输入内容"
            @select="handleSelectCustomerName"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="商品名称：" >
          <el-input v-model="listQuery.goodsName"  placeholder="品名/牌号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

      <!--数据列表-->
      <div class="table-container">
        <div style="width:100%;overflow: auto">
          <table class="table-saleRoyalty" cellpadding="0" cellspacing="0" border="0"
                 v-loading="listLoading"
                 style="margin-top: 20px;width:1860px">
            <tr>
              <th width="130" align="center" rowspan="2">发货单号</th>
              <th width="100" align="center" rowspan="2">发货日期</th>
              <th width="150" align="center" rowspan="2">销售单号</th>
              <th width="300" align="center" rowspan="2">客户名称</th>
              <th width="100" align="center" rowspan="2">业务员</th>
              <th width="100" align="center" rowspan="2">含税运费</th>
              <th width="100" align="center" rowspan="2">销售毛利</th>
              <th width="100" align="center" rowspan="2">提成毛利</th>
              <th width="780" align="center" colspan="7">商品详情</th>
            </tr>
            <tr>
              <th width="100" align="center">商品名称</th>
              <th width="180" align="center">商品牌号</th>
              <th width="100" align="center">销售价</th>
              <th width="100" align="center">采购价</th>
              <th width="100" align="center">杂费(装卸费)</th>
              <th width="100" align="center">发货数量</th>
              <th width="100" align="center">发货单位</th>
            </tr>
            <tr v-for="item in tableData">
                <td  align="center">{{item.deliverSn}}</td>
                <td align="center">{{item.shipTime}}</td>
                <td align="center">{{item.orderSn}}</td>
                <td>
                  <el-link @click="toCustomerDetail(item)" type="primary" v-if="listQuery.tab == 'my'" style="font-size:12px">
                    {{item.customerName}}
                  </el-link>
                  <span v-else>
                    {{item.customerName}}
                  </span>
                </td>
                <td align="center">{{item.userRealName}}</td>
                <td align="center">{{item.freightTax}}</td>
                <td align="center">{{item.maoli}}</td>
                <td align="center">{{item.royaltyMaoli}}</td>
                <td colspan="7" style="padding:0;border:0">
                  <table cellpadding="0" cellspacing="0" border="0">
                    <tr v-for="ii in item.deliverGoods">
                        <td width="100" align="center">{{ii.goodsName}}</td>
                        <td width="180">{{ii.goodsSn}}</td>
                        <td width="100" align="center">{{ii.goodsPrice}}</td>
                        <td width="100" align="center">{{ii.purchasePrice}}</td>
                        <td width="100" align="center">{{ii.consultation}}</td>
                        <td width="100" align="center">{{ii.shipNum}}</td>
                        <td width="100" align="center">{{ii.unit}}</td>
                    </tr>
                  </table>
                </td>
            </tr>
          </table>
        </div>

      </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

  </div>
</template>
<script>
    import {getCustomerOption,getUserOption,myDeptList,getSaleProfitList,getOrderStatList,getOrderUsersList} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultListQuery={
      pageNum: 1,
      pageSize: 10,
      deliverDate:null,
      tab:'my',
      deliverSn:'',
      userId:null,
      goodsName:'',
      customerName:''
    };
    export default {
      name: "index",
      data(){
          return {
              activeIndex: '1',
              creator:'',
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              customerStateList: [],
              userOptionList:[],
              roles:store.getters.roles ? store.getters.roles : [],
              deptList:[],
              orderStateList:[
                      {lable:'待销售首次确认',id:0},
                      {lable:'作废',id:10},
                      {lable:'待采购确认',id:20},
                      {lable:'待销售二次确认',id:30},
                      {lable:'流转结束',id:40},
                      ],
          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),

          isCanSaleByDept(){
              if(this.roles.indexOf("saleDept") != -1){
                  return true
              }else{
                  return false
              }
          },
          isCanSaleByAll(){
              if(this.roles.indexOf("saleAll") != -1){
                  return true
              }else{
                  return false
              }
          },
          isCanCustomerByAll(){
              if(this.roles.indexOf("customerByAll") != -1){
                  return true
              }else{
                  return false
              }
          },
      },
      created() {
        if (localStorage.getItem('saleRoyaltyDetails')){
          this.listQuery = JSON.parse(localStorage.getItem('saleRoyaltyDetails'));
          localStorage.removeItem('saleRoyaltyDetails');
        }
        if(this.$route.query.type){
          switch (this.$route.query.type) {
            case 'my':
              this.listQuery.tab = 'my';
              break;
            case 'myDay':
              this.listQuery.tab = 'my';
              this.listQuery.createdAt = [formatDate(new Date(), 'yyyy-MM-dd'),formatDate(new Date(), 'yyyy-MM-dd')];
              break;
            case 'dept':
              this.listQuery.tab = 'dept';
              break;
            case 'deptDay':
              this.listQuery.tab = 'dept';
              this.listQuery.createdAt = [formatDate(new Date(), 'yyyy-MM-dd'),formatDate(new Date(), 'yyyy-MM-dd')];
              break;
            case 'company':
              this.listQuery.tab = 'company';
              break;
            case 'companyDay':
              this.listQuery.tab = 'company';
              this.listQuery.createdAt = [formatDate(new Date(), 'yyyy-MM-dd'),formatDate(new Date(), 'yyyy-MM-dd')];
              break;
          }
        }
        this.getList();
        this.getUserOptionList();
        this.getDeptList();
        this.getOrderStatListData();

      },
      filters: {
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
      },
      methods:{
        //去客户详情页
        toCustomerDetail(item){
          localStorage.setItem('saleRoyaltyDetails', JSON.stringify(this.listQuery));
          this.$router.push({name:'customerDetail',query:{id:item.customerId}})
        },
        //获取订单状态列表
        getOrderStatListData(){
          getOrderStatList().then((res)=>{
            this.orderStateList = res;
          })
        },
          //获取我的部门列表
          getDeptList(){
            myDeptList().then((res)=>{
              this.deptList = res;
            })
          },
          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
                  this.userOptionList = res;
              })
          },

          //选择员工名称
          handleSelectUserName(key,item){
              this.listQuery[key] = item.userId;
          },


          //客户名称输入匹配
          querySearch(queryString, cb){
              getCustomerOption({keywords:queryString}).then((res)=>{
                  cb(res);
              })
          },


          //选择客户名称
          handleSelectCustomerName(item){
              this.listQuery.keywords = item.customerName
          },

        /**
         * 切换选择状态
         */
        handleSelect(key, keyPath){
            this.listQuery = JSON.parse(JSON.stringify(defaultListQuery)),
            this.listQuery.tab = key;
            this.handleSearchList();
        },
        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getList();
        },

        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },

        //获取订单列表
        getList() {
          this.listLoading = true;
          getSaleProfitList(this.listQuery).then(response => {
            this.tableData = response.list;
            this.count = response.count;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          });
        },

        //去详情页
        toDetail(type,item){
          localStorage.setItem('saleListQuery', JSON.stringify(this.listQuery));
          this.$router.push({name:'saleDetail',query:{id:item.customerId,type:type}})
        },

      },
    }
</script>

<style scoped lang="scss">
  .table-saleRoyalty{
    border-left:1px solid #EBEEF5;
    border-top:1px solid #EBEEF5;
    font-size:12px;
    th,td{
      border-right:1px solid #EBEEF5;
      border-bottom:1px solid #EBEEF5;
      padding:5px 10px;
      line-height: 23px;
    }
    th{
      color:#909399;
      background: #f5f7fa;
    }
  }
</style>
